<template>
  <input
    type="text"
    :maxlength="maxlength"
    :placeholder="placeholder"
    :value="value"
    ref="input"
    @input="handleInput"
    :disabled="disabled"
  >
</template>

<script>
export default {
  name: "numberInput",
  components: {},
  props: {
    value: {
      type: [String, Number],
      required: false,
      default: ""
    },
    maxlength: {
      type: String,
      required: false,
      default: ""
    },
    placeholder: {
      type: String,
      required: false,
      default: ""
    },
    int: {
      type: Boolean,
      required: false,
      default: false
    },
    disabled: {
      type: Boolean,
      required: false,
      default: false
    }
  },
  methods: {
    handleInput(e) {
      if (this.int) {
        var reg = /^\d*$/;
      } else {
        var reg = /^\d+(\.\d*)?$/;
      }
      if (!reg.test(e.target.value)) {
        if (this.int) {
          var value = e.target.value.replace(/\D/g, "");
        } else {
          var value = e.target.value.replace(/[^\d.]/g, "");
          var len = value.replace(/[^\.]/g, "").length;
          if (len === 2) {
            value = value.substr(0, value.length - 1);
          }
        }
        this.$refs.input.value = value;
        this.$emit("input", value);
      } else {
        this.$emit("input", e.target.value);
      }
    }
  }
};
</script>